import React from "react";

let num = 0;

class Hello extends React.Component {
  state = {
    count: 1,
  };

  /**
   * 渲染纯函数
   *
   * PS:
   *    1. 一定要保持纯粹
   *        1. 不能使用外部数据源
   *        2. 不要直接操作DOM
   *        3. 不要直接修改 props 与 state 数据
   *        4. 不要去直接调用接口之类的
   *    2. 一定要有返回值
   *        1. React 元素
   *        2. 数组或 fragments
   *        3. Portals（类似Vue3中的传送门teleport）
   *        4. 字符串或数值类型
   *        5. 布尔类型或 null 或者 undefined
   */
  render() {
    // const h2El = document.querySelector("h2");
    // console.log("h2El", h2El);

    // this.setState((state) => ({ count: state.count + 1 }));

    return (
      <div>
        <h2>Hello</h2>
        <button>count: {this.state.count}</button>
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    num: 1,
    first: "张",
    last: "三",
  };

  render() {
    return (
      <div>
        <h1>App</h1>
        <Hello />
        <Hello />

        <hr />
        <button
          onClick={() => {
            num++;
            console.log("num", num);
          }}
        >
          修改 Num
        </button>
      </div>
    );
  }
}

export default App;
